<template>
  <div class="menutree box-card">
    <el-input
      v-model.trim="keywords"
      size="small"
      prefix-icon="el-icon-search"
      placeholder="请输入菜单名称"
      maxlength="30"
      style="margin: 16px 0 0 0;"
    />
    <el-tree
      ref="tree"
      :key="key"
      :empty-text="$store.getters.dataText"
      class="left-tree"
      :data="tree"
      :load="load"
      :lazy="lazyFlag"
      :props="defaultProps"
      :default-expand-all="expandFlag"
      :expand-on-click-node="false"
      :highlight-current="true"
      :current-node-key="currentKey"
      :filter-node-method="filterNode"
      node-key="id"
      @node-click="handleNodeClick"
    >
      <div slot-scope="{ data }" class="custom-tree-node">
        <!-- <svg-icon :icon-class="user" /> -->
        <DtOverTooltip :content="data.name" />
      </div>
    </el-tree>
  </div>
</template>
<script>
import interfacePermissionApi from '@/framework/api/authCenter/interfacePermission/interfacePermission'

export default {
  name: 'GroTree',
  props: {
    name: {
      type: String,
      default: ''
    },
    handle: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      switchvalue: true,
      selectedOrg: '',
      orgName: '',
      keywords: '',
      tree: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      key: 1,
      lazyFlag: true,
      expandFlag: false,
      currentKey: '',
      params: {
        parentId: '', // 当前选中数据的ID，顶级则传0
        level: 0, // 顶级：0，应用：1，菜单：2，按钮：3
        keywords: '' // 模糊搜索
      }
      // 'menulist': [
      //   {
      //     'id': '11',
      //     'parentId': '-1',
      //     'code': '',
      //     'name': '用户中心111',
      //     'logo': 'user',
      //     'level': 2, // 1应用 2菜单 3按钮
      //     'type': 1, // 1菜单 2按钮
      //     'appId': '@id',
      //     'children': [
      //       { 'id': '1',
      //         'parentId': '-1',
      //         'code': 'user',
      //         'name': '用户管理',
      //         'logo': '',
      //         'level': '',
      //         'type': 1,
      //         'children': [{
      //           'id': '2',
      //           'parentId': '-1',
      //           'code': '',
      //           'name': '新增',
      //           'logo': '',
      //           'level': '',
      //           'type': 2,
      //           'children': null
      //         }, {
      //           'id': '3',
      //           'parentId': '-1',
      //           'code': '',
      //           'name': '删除',
      //           'logo': '',
      //           'level': '',
      //           'children': null
      //         }]
      //       },
      //       { 'id': '4',
      //         'parentId': '-1',
      //         'code': '',
      //         'name': '组织管理',
      //         'logo': '',
      //         'level': '',
      //         'children': null
      //       }
      //     ]
      //   }
      // ]
    }
  },
  watch: {
    keywords(val) {
      this.params.keywords = val
      if (val) {
        this.$nextTick(() => {
          this.key += 1
          this.lazyFlag = false
          this.expandFlag = true
        })
      } else {
        this.$nextTick(() => {
          this.key += 1
          this.lazyFlag = true
          this.expandFlag = false
          this.params.parentId = ''
          this.params.level = 0
        })
      }
      setTimeout(() => {
        interfacePermissionApi.getAppMenuList(this.params).then((res) => {
          const data = res.data.map((item, index) => {
            return item
          })
          this.tree = data
          // this.tree = this.menulist
        })
      }, 1000)
    }
  },
  created() {
    this.initTree()
  },
  methods: {
    // // 懒加载
    load(tree, resolve) {
      let id = ''
      let level = ''
      if (!tree.data || tree.data.length === 0) {
        id = 0
        return
      } else if (tree.data.length > 0) {
        this.params.parentId = ''
        this.params.level = 0
        resolve(tree.data)
        return
      } else {
        id = tree.data.id
        level = tree.data.level
      }
      this.params.parentId = id
      this.params.level = level
      interfacePermissionApi.getAppMenuList(this.params).then((res) => {
        const data = res.data.map((item, index) => {
          this.selectedOrg = res.data[0]
          // this.currentKey = res.data[0].id
          this.$nextTick(() => {
            // this.$refs.tree.setCurrentKey(res.data[0].id)
          })
          return item
        })
        resolve(data)
      })
    },
    /**
         * 选中树节点
         */
    handleNodeClick(data) {
      this.selectedOrg = data
      this.$emit('treeClick', data)
    },
    // 获取左侧组织树
    initTree() {
      const that = this
      interfacePermissionApi.getAppMenuList(that.params).then((res) => {
        that.tree = res.data
        // that.tree = that.menulist
        this.selectedOrg = res.data[0]
        this.currentKey = res.data[0].id
        this.$emit('treeClick', res.data[0])
        this.$nextTick(() => {
          this.$refs.tree.setCurrentKey(res.data[0].id)
        })
      })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    }
  }

}
</script>
    <style lang="scss" scoped>

    .cardHeader {
      .headSpan {
        font-size: 16px;
        font-family: HarmonyOS Sans SC-Medium, HarmonyOS Sans SC;
        font-weight: 500;
        color: #131414;
        line-height: 24px;
      }

      .headBtn {
        float: right;
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
        line-height: 24px;
        padding: 0;
      }
    }

    .svg-icon {
      font-size: 24px;
      display: block;
      margin-right: 8px !important;
      float: none !important;
    }
    .treeTop{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .treetop-left{
        display: flex;
        align-items: center;
      }
    }

    .left-title {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-bottom: 16px;
    }

    .left-tree {
      margin-top: 23px;
    }

    ::v-deep .el-card__header {
      padding: 0;
      border-bottom: none;
    }

    ::v-deep .el-card__body {
      padding: 0;
    }

    ::v-deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
      background-color: var(--lightOpacity)
    }

    ::v-deep .el-tree-node__content:hover,
    .el-upload-list__item:hover {
      background-color: var(--lightOpacity)
    }

    ::v-deep .el-tree-node__content {
      overflow: hidden;
      margin: 1px 0px
    }

    ::v-deep .el-dropdown-menu__item {
      padding: 6px 16px;
      line-height: 24px;
    }

    .custom-tree-node {
      display: flex;
      align-items: center;
      overflow: hidden;
      width: 100%;

      .tree-name {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        flex: 1;
      }

      .btn {
        color: var(--themeColor);

        i {
          margin-right: 8px;
          font-size: 16px;
        }
      }

      .el-dropdown-link {
        margin-right: 8px;
        display: block;
        width: 16px;
        height: 16px;
        text-align: center;
      }

      .el-dropdown-link:hover {
        color: var(--themeColor);
      }
    }
    </style>

